{%  extends 'base.html' %}
{% load url from future %}

{% block breadcrumb %}
<li><a href="{% url 'homepage' %}">Home</a> <span class="divider">/</span></li>
<li><a href="{% url 'graph_detail' graph_id %}">{{ graph.name }}</a> <span class="divider">/</span></li>
<li class="active">Delete visualization</li>
{% endblock %}

{% block title %}Delete visualization{% endblock %}

{% block page_title %}Delete visualization{%  endblock %}

{% block content %}
  <p>Are you sure do you want to remove the visualization <strong>{{ graph.name }}?</strong></p>
  <form class="form-horizontal" method="post">{% csrf_token %}
    <fieldset>
      {% if form.non_field_errors %}
          <div class="alert alert-error">
            {% for error in form.non_field_errors %}{{ error }}{% endfor %}
          </div>
        </p>
      {% endif %}
      {% for field in form %}
        <div class="control-group {{ field.id_for_label }} {% if field.errors %}error{% endif %}">
          <label class="control-label">{{ field.label }}</label>
          <div class="controls">{{ field }}
            {% if field.help_text %}
              <p class="help-inline"><small>{{ field.help_text }}</small></p>
            {% endif %}
            {% if field.errors %}
              <p class="help-inline">
                {% for error in  field.errors %}{{ error }}{% endfor %}
              </p>
            {% endif %}
          </div>
        </div>
      {% endfor %}
    </fieldset>
    <a href="{% url 'homepage' %}" class="btn">Cancel</a>
    <button type="submit" class="btn btn-danger">Delete</button>
  </form>
{% endblock %}

{% block extra_js %}
  require(['spreadsheet_chooser']);
{% endblock %}
